<template>
    <div class="pot" :class="type" ref="pot" :style="style"></div>
</template>

<script lang="ts" setup>
import { PKey, usePositionStore } from '@/stores/position';
import { computed, onMounted, reactive, ref } from 'vue';

const positionStore = usePositionStore()
interface IPot {
    type: PKey
}
const props = defineProps<IPot>();

const pot = ref(null);
const position = reactive({
    x: 0,
    y: 0
})

const orignPosition = {x: 0, y: 0}
const startPosition = {x: 0, y: 0}

const style = computed(()=>{
    let p = positionStore[props.type];
    return {
        transform: `translate(${p.x}px, ${p.y}px)`
    }
})

onMounted(() => {
    console.log(pot);
    const mc = new Hammer.Manager(pot.value, {domEvents: true, preventDefault: true});
    Hammer.defaults.domEvents = true;
    let initialScale = 1;
    let currentScale = 1;
    let initialX = 0;
    let initialY = 0;
    let currentX = 0;
    let currentY = 0;

    // mc.add(new Hammer.Pinch());
    mc.add(new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0, pointers: 1 }));

    mc.on("pinchstart panstart", handleGestureStart, true);
    mc.on("pinchmove panmove", handleGestureMove);
    mc.on("pinchend panend", handleGestureEnd);

    function handleGestureStart(event) {
        console.log("eeeeee", event)
        orignPosition.x = position.x;
        orignPosition.y = position.y;
        startPosition.x = event.center.x;
        startPosition.y = event.center.y;
    }

    function handleGestureMove(event) {
        position.x = orignPosition.x + event.center.x - startPosition.x;
        position.y = orignPosition.y + event.center.y - startPosition.y;
        positionStore.changePosition(position.x, position.y, props.type);
    }

    function handleGestureEnd(event) {
        
    }

    function applyTransform() {
        // const image = container.querySelector(".box");
        // image.style.transform = `scale(${currentScale}) translate(${currentX}px, ${currentY}px)`;
    }
})

</script>

<style lang="less" scoped>
.pot {
    position: absolute;

    width: 20px;
    height: 20px;
    background: rgba(0, 255, 0, 0.4);
    border-radius: 50%;
    z-index: 1;
}

.lt {
    left: -10px;
    top: -10px;
}

.rb {
    right: -10px;
    bottom: -10px;
}

.lb {
    left: -10px;
    bottom: -10px;
}

.rt {
    right: -10px;
    top: -10px;
}</style>